<template>
	<view>
		<u-navbar title="多元收款" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="jumpurl('/pages/workbench/tianjiadyzf')">添加</view>
		</u-navbar>
		<u-tabs :list="tabslist" :scrollable="false" lineColor="#ffb800" @click="changetab" :activeStyle="{
		    color: '#ffb800',
		    fontWeight: 'bold',
		    transform: 'scale(1.05)'
		}" :inactiveStyle="{
		            color: '#333333',
					fontWeight: '540',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs>
		<view class="mainpadding2">
			<template v-if="tabsid==1">
				<view class="flexcenter" v-if="!list.data.length">
					<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				</view>
				<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id">
					<view class="flexbetween">
						<view>
							<view class="flexleft">
								<text class="hui_text main_size bold">名稱：</text>
								<text class="hei_text main_size bold xiankuan">{{item.name}}</text>
							</view>
							<view class="flexleft margin_top">
								<text class="hui_text main_size bold">類別：</text>
								<text class="hei_text main_size bold xiankuan">{{returnType(item.type)}}</text>
							</view>
							<view class="flexleft margin_top" v-if="item.yhdh">
								<text class="hui_text main_size bold">代號：</text>
								<text class="hei_text main_size bold xiankuan">{{item.yhdh}}</text>
							</view>
						</view>
						<view class="rightbankimg">
							<image :src="item.image" mode=""></image>
						</view>
					</view>
					<view class="flexleft margin_top pdl" v-if="item.zh">
						<text class="hui_text main_size bold">帳號：</text>
						<text class="hei_text main_size bold">{{item.zh}}</text>
					</view>
					<view class="flexright margin_top">
						<view class="flexleft margin_right"
							@click="jumpdetail('/pages/workbench/tianjiadyzf?id=',item.id)">
							<u-icon name="edit-pen" color="#999" size="16"></u-icon>
							<view class="xiaohei">編輯</view>
						</view>
						<view class="flexleft" @click="delitem(item.id)">
							<u-icon name="trash" color="#999" size="16"></u-icon>
							<view class="xiaohei">刪除</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="tabsid==2">
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween">
						<view class="huang_text main_size bold">全支付線下收款</view>
						<view class="flexright">
							<view class="lanlable margin-right" style="border-radius: 5rpx;" @click="jumplink('qxpay_xxurl')">申請</view>
							<u-switch inactiveColor="rgb(230, 230, 230)" v-model="qxpay_xxtype"
								activeColor="#feb800"></u-switch>
						</view>
					</view>
					<template v-if="qxpay_xxtype">
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">特店代號</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="qxpay_mercode">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">store ID</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="qxpay_store_id">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">secret Key</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="qxpay_secretKey">
						</view>
					</template>
				</view>
				<!-- icash支付 -->
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween">
						<view class="huang_text main_size bold">icash支付</view>
						<view class="flexright">
							<view class="lanlable margin-right" style="border-radius: 5rpx;">申請</view>
							<u-switch inactiveColor="rgb(230, 230, 230)" v-model="icash_status"
								activeColor="#feb800"></u-switch>
						</view>

					</view>
					<template v-if="icash_status">
						<!-- <view class="flexbetween margin_top">
							<view class="hei_text main_size">客戶端支付方式</view>
							<view class="flexright">
								<u-radio-group v-model="icash_client_type" placement="row" circle>
									<u-radio activeColor="#feb800" :customStyle="{marginRight: '10rpx'}" label="二維碼"
										:name="1"></u-radio>
									<u-radio activeColor="#feb800" label="線上" :name="2"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="flexleft" style="width: 90%;">
								<view class="hei_text main_size margin-right">鏈接</view>
								<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 80%;"
									v-model="icash_client_url">
							</view>
							<view class="" @click="getCodelj(2)">
								<u-icon name="scan" color="#ffb800" size="28"></u-icon>
							</view>
						</view> -->
					</template>
				</view>
				<!-- 悠遊付 -->
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween">
						<view class="huang_text main_size bold">悠遊付</view>
						<view class="flexright">
							<view class="lanlable margin-right" style="border-radius: 5rpx;">申請</view>
							<u-switch inactiveColor="rgb(230, 230, 230)" v-model="yypay_status"
								activeColor="#feb800"></u-switch>
						</view>

					</view>
					<template v-if="yypay_status">
						<!-- <view class="flexbetween margin_top">
							<view class="hei_text main_size">客戶端支付方式</view>
							<view class="flexright">
								<u-radio-group v-model="yypay_client_type" placement="row" circle>
									<u-radio activeColor="#feb800" :customStyle="{marginRight: '10rpx'}" label="二維碼"
										:name="1"></u-radio>
									<u-radio activeColor="#feb800" label="線上" :name="2"></u-radio>
								</u-radio-group>
							</view>
						</view>
						<view class="flexbetween margin_top">
							<view class="flexleft" style="width: 90%;">
								<view class="hei_text main_size margin-right">鏈接</view>
								<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 80%;"
									v-model="yypay_client_url">
							</view>
							<view class="" @click="getCodelj(3)">
								<u-icon name="scan" color="#ffb800" size="28"></u-icon>
							</view>
						</view> -->
					</template>
				</view>
				<!-- 街口線上收款 -->
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween">
						<view class="huang_text main_size bold">街口線上收款</view>
						<view class="flexright">
							<view class="lanlable margin-right" style="border-radius: 5rpx;" @click="jumplink('jkpay_xsurl')">申請</view>
							<u-switch inactiveColor="rgb(230, 230, 230)" v-model="jkpay_status"
								activeColor="#feb800"></u-switch>
						</view>

					</view>
					<template v-if="jkpay_status">
						<!-- <view class="flexbetween margin_top">
							<view class="hei_text main_size">客戶端支付方式</view>
							<view class="flexright">
								<u-radio-group v-model="jkpay_client_type" placement="row" circle>
									<u-radio activeColor="#feb800" :customStyle="{marginRight: '10rpx'}" label="二維碼"
										:name="1"></u-radio>
									<u-radio activeColor="#feb800" label="線上" :name="2"></u-radio>
								</u-radio-group>
							</view>
						</view> -->
						<!-- <view class="flexbetween margin_top" v-if="jkpay_client_type==1">
							<view class="flexleft" style="width: 90%;">
								<view class="hei_text main_size margin-right">鏈接</view>
								<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 80%;"
									v-model="jkpay_client_url">
							</view>
							<view class="" @click="getCodelj(4)">
								<u-icon name="scan" color="#ffb800" size="28"></u-icon>
							</view>
						</view> -->
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">storeId</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="jkpay_storeId">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">api_key</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="jkpay_api_key">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">secret_key</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="jkpay_secret_key">
						</view>
					</template>
				</view>
				<!-- 街口線下收款 -->
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween">
						<view class="huang_text main_size bold">街口線下收款</view>
						<view class="flexright">
							<view class="lanlable margin-right" style="border-radius: 5rpx;" @click="jumplink('jkpay_xxurl')">申請</view>
							<u-switch inactiveColor="rgb(230, 230, 230)" v-model="jkpay_client_xxtype"
								activeColor="#feb800"></u-switch>
						</view>
					</view>
					<template v-if="jkpay_client_xxtype">
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">MID</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="jkpay_MID">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">商店 ID</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="jkpay_xxStoreID">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">API-KEY</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="jkpay_APIKEY">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">系商代號</view>
							<view class="main_size hei_text">diankouzhifu</view>
						</view>
					</template>
				</view>
				<!-- Line Pay線上收款 -->
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween">
						<view class="huang_text main_size bold">Line Pay線上收款</view>
						<view class="flexright">
							<view class="lanlable margin-right" style="border-radius: 5rpx;" @click="jumplink('linepay_xsurl')">申請</view>
							<u-switch inactiveColor="rgb(230, 230, 230)" v-model="linepay_status"
								activeColor="#feb800"></u-switch>
						</view>

					</view>
					<template v-if="linepay_status">
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">chinnel ID</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="linepay_xs_channelId">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">chinnel KEY</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="linepay_xs_channelSecret">
						</view>
					</template>
				</view>
				<!-- Line Pay 線下收款 -->
				<view class="mainpadding_top ffffff radius">
					<view class="flexbetween">
						<view class="huang_text main_size bold">Line Pay 線下收款</view>
						<view class="flexright">
							<view class="lanlable margin-right" style="border-radius: 5rpx;" @click="jumplink('linepay_xxurl')">申請</view>
							<u-switch inactiveColor="rgb(230, 230, 230)" v-model="linepay_client_xxtype"
								activeColor="#feb800"></u-switch>
						</view>

					</view>
					<template v-if="linepay_client_xxtype">
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">chinnel ID</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="linepay_xx_channelId">
						</view>
						<view class="flexleft margin_top">
							<view class="hei_text main_size margin-right">chinnel KEY</view>
							<input class="main_size hei_text" type="text" placeholder="請輸入" style="width: 70%;"
								v-model="linepay_xx_channelSecret">
						</view>
					</template>
				</view>
				<view class="submitbtn margin_top" @click="submit">確定</view>
			</template>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list: {
					data: []
				},
				tabsid: 1,
				tabslist: [{
					name: '多元收款',
					value: 1,
				}, {
					name: '行動支付',
					value: 2,
				}],
				// 行動支付内容
				ljcurrent: 1,
				qxpay_xxtype: "",
				qxpay_store_id: "",
				qxpay_mercode: "",
				qxpay_secretKey: "",
				icash_status: false,
				icash_client_type: 1,
				icash_client_url: "",
				yypay_status: false,
				yypay_client_type: 1,
				yypay_client_url: "",
				jkpay_status: false,
				jkpay_client_type: 1,
				jkpay_client_url: "",
				jkpay_storeId: "",
				jkpay_api_key: "",
				jkpay_secret_key: "",
				linepay_status: false,
				linepay_client_type: 1,
				linepay_xs_channelId: "",
				linepay_xs_channelSecret: "",
				linepay_client_xxtype: false,
				linepay_xx_channelId: "",
				linepay_xx_channelSecret: "",
				jkpay_client_xxtype: false,
				jkpay_MID: "",
				jkpay_APIKEY: "",
				jkpay_xxStoreID: "",
				jkpay_StoreName: "",
				linkAll:{}
			}
		},
		onLoad(options) {
			this.getInfo()
			this.getpayinfoset()
		},
		onShow() {
			uni.$off("codelj")
			uni.$on("codelj", data => {

				if (this.ljcurrent == 2) {
					this.icash_client_url = data
				}
				if (this.ljcurrent == 3) {
					this.yypay_client_url = data
				}
				if (this.ljcurrent == 4) {
					this.jkpay_client_url = data
				}
			})
			this.init()
		},
		methods: {
			jumplink(val){
				location.href = this.linkAll[val];
			},
			getpayinfoset(){
				this.http.request("/api/index/getConfigInfoItem", "POST", {
					pidtype:"payinfoset",
				}).then(res=>{
					this.linkAll = res.data
				})
			},
			getInfo() {
				this.http.request("/api/shop/Shopdeail", "POST", {
					shop_id: uni.getStorageSync("shop_id")
				}).then(res => {
					let data = res.data
					this.qxpay_xxtype = data.qxpay_xxtype ? true : false
					this.qxpay_store_id = data.qxpay_store_id || ""
					this.qxpay_mercode = data.qxpay_mercode || ""
					this.qxpay_secretKey = data.qxpay_secretKey || ""
					this.icash_status = data.icash_status ? true : false
					this.icash_client_type = data.icash_client_type || ""
					this.icash_client_url = data.icash_client_url || ""
					this.yypay_status = data.yypay_status ? true : false
					this.yypay_client_type = data.yypay_client_type || ""
					this.yypay_client_url = data.yypay_client_url || ""
					this.jkpay_status = data.jkpay_status ? true : false
					this.jkpay_client_type = data.jkpay_client_type || ""
					this.jkpay_client_url = data.jkpay_client_url || ""
					this.jkpay_storeId = data.jkpay_storeId || ""
					this.jkpay_api_key = data.jkpay_api_key || ""
					this.jkpay_secret_key = data.jkpay_secret_key || ""
					this.linepay_status = data.linepay_status ? true : false
					this.linepay_client_type = data.linepay_client_type || ""
					this.linepay_xs_channelId = data.linepay_xs_channelId || ""
					this.linepay_xs_channelSecret = data.linepay_xs_channelSecret || ""
					this.linepay_xx_channelId = data.linepay_xx_channelId || ""
					this.linepay_xx_channelSecret = data.linepay_xx_channelSecret || ""
					this.linepay_client_xxtype = data.linepay_client_xxtype ? true : false
					this.jkpay_MID = data.jkpay_MID || ""
					this.jkpay_APIKEY = data.jkpay_APIKEY || ""
					this.jkpay_xxStoreID = data.jkpay_xxStoreID || ""
					this.jkpay_StoreName = data.jkpay_StoreName || ""
					this.jkpay_client_xxtype = data.jkpay_client_xxtype ? true : false
				})
			},
			submit() {
				if (this.qxpay_xxtype) {//全支付綫下
					if (this.qxpay_mercode == "") {
						httpRequest.toast("請輸入全支付特店代號")
						return false
					}
					if (this.qxpay_store_id == "") {
						httpRequest.toast("請輸入全支付store ID")
						return false
					}
					if (this.qxpay_secretKey == "") {
						httpRequest.toast("請輸入全支付secret Key")
						return false
					}
				}
				if (this.icash_status) {
					if (this.icash_client_url == "") {
						httpRequest.toast("請輸入icash支付鏈接")
						return false
					}
				}
				if (this.yypay_status) {
					if (this.yypay_client_url == "") {
						httpRequest.toast("請輸入悠遊付鏈接")
						return false
					}
				}
				if (this.jkpay_status) {
					if (this.jkpay_storeId == "") {
						httpRequest.toast("請輸入storeId")
						return false
					}
					if (this.jkpay_api_key == "") {
						httpRequest.toast("請輸入api_key")
						return false
					}
					if (this.jkpay_secret_key == "") {
						httpRequest.toast("請輸入secret_key")
						return false
					}
				}
				if (this.jkpay_client_xxtype) {
					if (this.jkpay_MID == "") {
						httpRequest.toast("請輸入街口MID")
						return false
					}

					if (this.jkpay_xxStoreID == "") {
						httpRequest.toast("請輸入街口商店 ID")
						return false
					}
					if (this.jkpay_APIKEY == "") {
						httpRequest.toast("請輸入街口API-KEY")
						return false
					}
					// if(this.jkpay_StoreName==""){
					// 	httpRequest.toast("請輸入街口系商代號")
					// 	return false
					// }
				}
				if (this.linepay_status) {
					if (this.linepay_xs_channelId == "") {
						httpRequest.toast("請輸入Line Pay chinnel ID")
						return false
					}
					if (this.linepay_xs_channelSecret == "") {
						httpRequest.toast("請輸入Line Pay chinnel KEY")
						return false
					}
				}
				if (this.linepay_client_xxtype) {
					if (this.linepay_xx_channelId == "") {
						httpRequest.toast("請輸入Line Pay chinnel ID")
						return false
					}
					if (this.linepay_xx_channelSecret == "") {
						httpRequest.toast("請輸入Line Pay chinnel KEY")
						return false
					}
				}
				this.http.request("/api/shop/Shopedit", "POST", {
					shop_id: uni.getStorageSync("shop_id"),
					qxpay_xxtype: this.qxpay_xxtype ? 1 : 0,
					qxpay_store_id: this.qxpay_store_id,
					qxpay_mercode: this.qxpay_mercode,
					qxpay_secretKey: this.qxpay_secretKey,
					icash_status: this.icash_status ? 1 : 0,
					icash_client_type: this.icash_client_type,
					icash_client_url: this.icash_client_url,
					yypay_status: this.yypay_status ? 1 : 0,
					yypay_client_type: this.yypay_client_type,
					yypay_client_url: this.yypay_client_url,
					jkpay_status: this.jkpay_status ? 1 : 0,
					jkpay_client_type: this.jkpay_client_type,
					jkpay_client_url: this.jkpay_client_url,
					jkpay_storeId: this.jkpay_storeId,
					jkpay_api_key: this.jkpay_api_key,
					jkpay_secret_key: this.jkpay_secret_key,
					linepay_status: this.linepay_status ? 1 : 0,
					linepay_client_type: this.linepay_client_type,
					linepay_client_url: this.linepay_client_url,
					linepay_xs_channelId: this.linepay_xs_channelId,
					linepay_xs_channelSecret: this.linepay_xs_channelSecret,
					linepay_client_xxtype: this.linepay_client_xxtype ? 1 : 0,
					linepay_xx_channelId: this.linepay_xx_channelId,
					linepay_xx_channelSecret: this.linepay_xx_channelSecret,
					jkpay_MID: this.jkpay_MID,
					jkpay_APIKEY: this.jkpay_APIKEY,
					jkpay_xxStoreID: this.jkpay_xxStoreID,
					jkpay_StoreName: this.jkpay_StoreName,
					jkpay_client_xxtype: this.jkpay_client_xxtype
				}).then(res => {
					if (res.code == 1) {
						this.http.toast("修改成功");
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					} else {
						this.http.toast(res.msg);
					}
				})
			},
			getCodelj(val) {
				this.ljcurrent = val
				uni.navigateTo({
					url: "/pages/workbench/getcodelj"
				})
			},
			changetab(e) {
				console.log(e, "999");
				this.tabsid = e.value
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			},
			jumpdetail(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			delitem(id) {
				this.http.modal('提示', '確認是否刪除', true, (resp) => {
					if (resp) {
						this.http.request('/api/shop/delpaytype', 'POST', {
							id: id,
						}).then(res => {
							if (res.code == 1) {
								this.http.toast("刪除成功")
								this.init()
							} else {
								this.http.toast(res.msg)
							}
						})
					}
				})
			},
			returnType(val) {
				if (val == 1) return "轉帳"
				if (val == 2) return "行動支付"
				if (val == 3) return "信用卡"
				if (val == 4) return "超商繳費"
			},
			init(val) { //提現記錄
				let _this = this;
				let data = {
					shop_id: uni.getStorageSync("shop_id"),
				}
				let url = '/api/shop/listpaytype'
				this.http.request(url, 'POST', data, false, false, true).then(res => {
					if (res.code == 1) {
						res.data.forEach(item => {
							item.image = item.image
						})
						this.list.data = res.data
					}
				}).catch(err => {
					this.http.toast(err.msg);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rightbankimg {
		width: 200rpx;
		height: 200rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>